<template>
	<!-- <view class="All">
		<view class="xitong">
			<view class="xitongMsg">
				<view class="xitongMsg-left">
					<image src="../../static/icon/zu33.png" mode=""></image>
					<view class="xitongMsg-left-right">
						<text>系统消息</text>
						<text>暂时没有系统消息</text>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="kefuMsg">
				<view class="kefuMsg-left">
					<image src="../../static/icon/zu38.png" mode=""></image>
					<view class="kefuMsg-left-right">
						<text>联系客服</text>
						<text>有问题来找我</text>
					</view>
				</view>
			</view>
		</view>
		<view class="kong"></view>
		<view class="yonghu">
			<view class="yonghu-left">
				<image src="../../static/icon/lizixin.png" mode=""></image>
				<view class="yonghu-left-right">
					<text>李子健</text>
					<text>我下单了，你看看现在好了吧？</text>
				</view>
			</view>
		</view>
	</view> -->
	<view class="message">
		
		<view class="msg-list-item">
			<view class="avatar">
				<image src="../../static/icon/zu33.png" mode=""></image>
				<view class="tip">
					1
				</view>
			</view>
			<view class="content">
				<view class="top">
					<text class="title">系统消息</text>
					<text class="time">15:30</text>
				</view>
				<view class="bottom">
					<text>暂时没有系统消息</text>
				</view>
			</view>
		</view>
		<view class="msg-list-item">
			<view class="avatar">
				<image src="../../static/icon/zu38.png" mode=""></image>
			</view>
			<view class="content">
				<view class="top">
					<text class="title">联系客服</text>
					<text class="time">15:30</text>
				</view>
				<view class="bottom">
					<text>暂时没有系统消息</text>
				</view>
			</view>
		</view>
		<view class="msg-list-item user" >
			<view class="avatar">
				<image src="../../static/icon/lizijun.png" mode=""></image>
				<view class="tip">
					12
				</view>
			</view>
			<view class="content">
				<view class="top">
					<text class="title">系统消息</text>
					<text class="time">15:30</text>
				</view>
				<view class="bottom">
					<text>暂时没有系统消息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.message{
		width: 100vw;
		height: 100vh;
		background-color: rgba(248,248,248,1);
	}
	.user{
		margin-top: 20rpx;
	}
	.msg-list-item{
		width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		border-bottom: 1px solid #FFFFFF;
		background-color: #FFFFFF;
	}
	.avatar{
		width: 88rpx;
		height: 88rpx;
		margin-right: 10rpx;
		position: relative;
	}
	.tip{
		position: absolute;
		width: 30rpx;
		height: 28rpx;
		border-radius: 15rpx;
		top:0;
		left: 78%;
		background-color: rgba(255,29,0,1);
		color: #FFFFFF;
		font-size: 20rpx;
		text-align: center;
		line-height: 28rpx;
	}
	.avatar image{
		width: 100%;
		height: 100%;
	}
	.msg-list-item .content{
		overflow: hidden;
		flex: 1;
	}
	.top{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		color:rgba(51,51,51,1);
		font-family: Arial, Helvetica, sans-serif;
	}
	.time{
		color:rgba(153,153,153,1);
	}
	.bottom{
	}
	.bottom text{
		color:rgba(153,153,153,1);
	}
	/* .All{
		padding: 30rpx 30rpx 0;
		background:rgba(255,255,255,1);
	}
	image{
		width: 88rpx;
		height: 88rpx;
	}
	.xitong{
		display: flex;
		flex-direction: column;
		background:rgba(255,255,255,1);
	}
	.yonghu{
		width: 100%;
		height: 100vh;
		background:rgba(255,255,255,1);
	}
	.xitongMsg{
		width: 100%;
		height: 152rpx;
		display: flex;
		align-items: center;
	}
	.kefuMsg{
		width: 100%;
		height: 152rpx;
		display: flex;
		align-items: center;
	}
	.line{
		height: 2rpx;
		background:rgba(248,248,248,1);
	}
	.xitongMsg-left{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.kefuMsg-left{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.xitongMsg-left-right{
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}
	.kefuMsg-left-right{
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}
	.kong{
		width:100%;
		height:24rpx;
		background:rgba(248,248,248,1);
		opacity:1;
	}
	.yonghu-left{
		display: flex;
		height: 152rpx;
		align-items: center;
	}
	.yonghu-left-right{
		display: flex;
		flex-direction: column;
		color:#333333 ;
	} */
</style>